<template>
  <div class="agreement">
    <div class="text">
    <div style="margin-left:20px">筛选查询</div>
    <div class="edit">
      <div @click="router.go(-1)">查询结果</div>
    </div>
  </div>
    <div class="bei">
      <span>数据列表</span>
      <button @click="jump" class="add">新增</button>
    </div>
    <el-table :data="tableData.list" border style="width: 100% ">
    <el-table-column prop="id" label="序号" width="180"/>
    <el-table-column prop="phone" label="合同编号" width="180" />
    <el-table-column prop="age" label="合同名称" width="150" />
    <el-table-column prop="sex" label="合同类型" width="150" />
    <el-table-column prop="name" label="负责人" width="150" />
    <el-table-column prop="email" label="生效日期" width="180" />
    <el-table-column prop="address" label="失效日期" width="180" />
    <!-- <el-table-column prop="sex" label="操作" width="180" /> -->


    <el-table-column prop="cz" label="操作"  width="180">
      <template #default="scope"> 
        <el-button link type="primary" size="small" @click.prevent="lookRow(scope.row)">详情</el-button>
        <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">修改</el-button>
        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
      </template>
    </el-table-column>

    <!-- <el-table-column prop="address" label="合同名称" />   -->
  </el-table>

  </div>

</template>

<script setup>
  import { onMounted,reactive } from 'vue';
  import { RouterLink,RouterView } from 'vue-router';
  import axios from 'axios'
  import { useRoute, useRouter } from 'vue-router';
  var router =useRouter();
  var tableData = reactive({list:[]})
  onMounted(()=>{
    axios.get('/api/user/list').then((res)=>{
      // console.log(res.data.list);
      tableData.list = res.data.list;
    })
  })

// 删除
  var deleteRow = (row)=>{
      axios.post('/api/user/delete',{id:row.id}).then((res)=>{
        tableData.list = res.data.list;
      })
  }
// 详情
var lookRow = (row)=>{
      router.push({
        path:'/index/agreedetail',
        query:row
      })
}

// 编辑
var editRow = (row)=>{
     router.push({
       path:'/index/agreechange',
       query:row
     })
}
var jump=()=>{
  router.push('/index/agreeadd')
}
</script>

<style scoped>
.el-table .cell{

  text-align: center;
}
.bian{
    padding: 0;
    font-size: 30px;
}
.bei{
  width: 100%;
  height: 60px;
  background-color: #f2f2f2;
  line-height: 60px;
}
.bei span{
     margin-left: 20px;
     color: rgb(96, 96, 96);
     font-weight: 800;
}
.bei button{
  float: right;
  padding: 10px;
  font-weight: 800;
  width: 100px;
  margin-top: 10px;
  margin-right: 10px;
  border: none;
  color: rgb(26, 175, 125);
  border-radius: 10px;
}

.text{
  display: flex;
  width: 1328px;
  justify-content: space-between;
  background: #f2f2f2;
  height: 50px;
  align-items: center;
  color: #000;

  margin-bottom: 20px;
 

}
.edit{
  display: flex;
  justify-content: space-between;
  width: 150px;
  /* margin-left: 50px; */
  font-size: 14px;
 
}

.edit  div{
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #63c8e0;
    font-size: 12px;
    background: white;
    /* margin-right: 20px; */
    cursor: pointer;
  }  
.add{
  width: 50px;
  height: 40px;
  background-color: #fff;
  margin-right: 10px;
  cursor: pointer;
}
.add:hover{
  background-color: rgb(26, 175, 125);
color: #fff;
}
</style>